// JavaScript Document
/**
a 定义超链接 
altGlyph 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字） 
altGlyphDef 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字） 
altGlyphItem 定义一系列候选的象性符号的替换 
animate 随时间动态改变属性 
animateColor 规定随时间进行的颜色转换 
animateMotion 使元素沿着动作路径移动 
animateTransform 对元素进行动态的属性转换 
circle 定义圆 
clipPath   
color-profile 规定颜色配置描述 
cursor 定义独立于平台的光标 
definition-src 定义单独的字体定义源 
defs 被引用元素的容器 
desc 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 
ellipse 定义椭圆 
feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。 
feColorMatrix SVG 滤镜。应用matrix转换。 
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。 
feComposite SVG 滤镜。 
feConvolveMatrix SVG 滤镜。 
feDiffuseLighting SVG 滤镜。 
feDisplacementMap SVG 滤镜。 
feDistantLight SVG 滤镜。 Defines a light source 
feFlood SVG 滤镜。 
feFuncA SVG 滤镜。feComponentTransfer 的子元素。 
feFuncB SVG 滤镜。feComponentTransfer 的子元素。 
feFuncG SVG 滤镜。feComponentTransfer 的子元素。 
feFuncR SVG 滤镜。feComponentTransfer 的子元素。 
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。 
feImage SVG 滤镜。 
feMerge SVG 滤镜。创建累积而上的图像。 
feMergeNode SVG 滤镜。feMerge的子元素。 
feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。 
feOffset SVG 滤镜。相对与图形的当前位置来移动图像。 
fePointLight SVG 滤镜。 
feSpecularLighting SVG 滤镜。 
feSpotLight SVG 滤镜。 
feTile SVG 滤镜。 
feTurbulence SVG 滤镜。 
filter 滤镜效果的容器。 
font 定义字体。 
font-face 描述某字体的特点。 
font-face-format   
font-face-name   
font-face-src   
font-face-uri   
foreignObject   
g 用于把相关元素进行组合的容器元素。 
glyph 为给定的象形符号定义图形。 
glyphRef 定义要使用的可能的象形符号。 
hkern   
image   
line 定义线条。 
linearGradient 定义线性渐变。 
marker   
mask   
metadata 规定元数据。 
missing-glyph   
mpath   
path 定义路径。 
pattern   
polygon 定义由一系列连接的直线组成的封闭形状。 
polyline 定义一系列连接的直线。 
radialGradient 定义放射形的渐变。 
rect 定义矩形。 
script 脚本容器。（例如ECMAScript） 
set 为指定持续时间的属性设置值 
stop   
style 可使样式表直接嵌入SVG内容内部。 
svg 定义SVG文档片断。 
switch   
symbol   
text   
textPath   
title 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 
tref   
tspan   
use   
view   
vkern 
*/
((function(a){
	//插件本体
	var ksvg = function(opts){
		this.opts = a.kuoqiJs.opts(opts,{
			width:300,//宽度
			height:200,//高度
			bgimg:"",//背景图片自动铺满
		},'');
		var ths = this;
		this.width = this.opts.width;
		this.height = this.opts.height;
		this.svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
		//this.svg = document.createElement("svg");
		this.svg.setAttribute("width",this.opts.width);
		this.svg.setAttribute("height",this.opts.height);
		//创建一个动画
		this.Animation = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				attributeName:"transform",
				attributeType:"xml",
				type:"translate",
				from:"10",
				to:"100",
				begin:"0s",
				dur:"2s",
				},'type');
			this.element = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
			for(var i in this.opts){
				this.element.setAttribute(i,opts[i]);	
			}
			//输出元素信息
			this.toElement = function(){
				return this.element;	
			}
		}
		//创建一个圆
		this.Circle = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				cx:100,
				cy:50,
				r:40,
				stroke:'black',
				"stroke-width":2,
				fill:"red"
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','circle');
			for(var i in this.opts){
				this.element.setAttribute(i,this.opts[i]);
			};
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){
				return this.element;	
			}
		}
		//创建一个线条
		this.Line = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				x1:0,//点一的x
				y1:0,//点一的y
				x2:100,//点二的x
				y2:100,//点二的y
				stroke:'black',
				"stroke-width":2,
				fill:"red"
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','line');
			for(var i in this.opts){
				this.element.setAttribute(i,this.opts[i]);
			};
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){ return this.element;}	
		};
		//折线
		this.Polyline = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				point:[
					//[0,0],
					//[100,200]
				],//里面设置点的相关信息，用来做展示，点使用一对的数组来做展示
				stroke:'red',
				"stroke-width":1,
				fill:"white"
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','polyline');
			for(var i in this.opts){
				if(i=='point'){  continue;};
				this.element.setAttribute(i,this.opts[i]);
			};
			var stream = "";
			for(var i = 0;i<this.opts.point.length;i++){
				stream += stream
					?(" "+this.opts.point[i][0] + ','+ this.opts.point[i][1])
					:(this.opts.point[i][0] + ','+ this.opts.point[i][1]);
			}
			this.element.setAttribute("points",stream);
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){ return this.element;}		
		};
		//创建多边形
		this.Polygon = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				point:[
					//[0,0],
					//[100,200]
				],//里面设置点的相关信息，用来做展示，点使用一对的数组来做展示
				stroke:'red',
				"stroke-width":1,
				fill:""
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','polygon');
			for(var i in this.opts){
				if(i=='point'){  continue;};
				this.element.setAttribute(i,this.opts[i]);
			};
			var stream = "";
			for(var i = 0;i<this.opts.point.length;i++){
				stream += stream
					?(" "+this.opts.point[i][0] + ','+ this.opts.point[i][1])
					:(this.opts.point[i][0] + ','+ this.opts.point[i][1]);
			}
			this.element.setAttribute("points",stream);
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){ return this.element;}		
		};
		//创建路径
		/**
			M = moveto //移动
			L = lineto //尺子
			H = horizontal lineto //水平线
			V = vertical lineto //垂直线条到
			C = curveto //弯曲
			S = smooth curveto //光滑的曲线
			Q = quadratic Belzier curve //二次贝尔齐尔曲线
			T = smooth quadratic Belzier curveto //光滑二次贝尔齐尔曲线
			A = elliptical Arc //椭圆弧
			Z = closepath //关闭路劲
		*/
		this.Path = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','path');
			for(var i in this.opts){
				this.element.setAttribute(i,this.opts[i]);
			};
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){ return this.element;}		
		};
		//创建一个椭圆
		this.Ellipse = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				cx:100,//x轴
				cy:50,//y轴
				rx:10,//椭圆x长度
				ry:10,//椭圆y长度
				stroke:'',
				"stroke-width":0,
				fill:""
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','ellipse');
			for(var i in this.opts){
				this.element.setAttribute(i,this.opts[i]);
			};
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){
				return this.element;	
			}
		}
		//创建一个文本
		this.Text = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				style:"",
			},'text');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','text');
			this.element.innerHTML = this.opts.text;
			this.element.setAttributeNS(null,"x",this.opts.x);
			this.element.setAttributeNS(null,"y",this.opts.y);
			if(this.opts.style){
				this.element.setAttributeNS(null,"style",this.opts.style);	
			}
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			//输出元素信息
			this.toElement = function(){
				return this.element;	
			}
		}
		//创建一个矩形
		this.Rect = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				x:0,//点的x
				y:0,//点的y
				width:10,//宽度
				height:10,//高度
				fill:'',//填充颜色
				'stroke-width':1,//边线的宽度
				stroke:''//边线的颜色
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','rect');
			for(var i in this.opts){
				this.element.setAttribute(i,this.opts[i]);
			};
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			this.toElement = function(){ return this.element;};
		};
		//创建一个图片
		this.Image = function(opts){
			this.opts = a.kuoqiJs.opts(opts,{
				cx:0,
				cy:0,
				url:"",
				width:"",
				height:"",
				visible:'visible',
				transform:""
				},'');
			this.element = document.createElementNS('http://www.w3.org/2000/svg','image');
			this.element.setAttributeNS(null,"width",this.opts.width);
			this.element.setAttributeNS(null,"height",this.opts.height);
			this.element.setAttributeNS(null,"href",this.opts.url);
			this.element.setAttributeNS(null,"x",this.opts.cx);
			this.element.setAttributeNS(null,"y",this.opts.cy);
			this.element.setAttributeNS(null,"visibility",this.opts.visible);
			this.element.setAttributeNS(null,"transform",this.opts.transform);
			
			//注册关于元素的动画
			this.animation = function(animation){
				this.element.appendChild(animation.toElement());
			};
			this.toElement = function(){ return this.element;};
		};
		//this.svg = this.element.getSVGDocument();
		//创建一个圆
		this.addCircle = function(opts,animation){
			var ele = new this.Circle(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		};
		//创建一个椭圆
		this.addEllipse = function(opts,animation){
			var ele = new this.Ellipse(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		//创建一个矩形
		this.addRect = function(opts,animation){
			var ele = new this.Rect(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		//创建一个线条
		this.addLine = function(opts,animation){
			var ele = new this.Line(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		//创建一个折线
		this.addPolyline = function(opts,animation){
			var ele = new this.Polyline(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		//创建一个多边形
		this.addPolygon = function(opts,animation){
			var ele = new this.Polygon(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		//创建一个路劲
		this.addPath = function(opts,animation){
			var ele = new this.Path(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		this.addSvg = function(svg,cx,cy){
			cx = cx||(cx=0);
			cy = cy||(cy=0);
			svg.svg.setAttribute("x",cx);
			svg.svg.setAttribute("y",cy);
			this.svg.appendChild(svg.toElement());
		};
		//增加一个图片
		this.addImage = function(opts,animation){
			var ele = new this.Image(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		};
		//增加文本
		this.addText = function(opts,animation){
			var ele = new this.Text(opts);
			if(animation!=undefined){
				ele.animation(animation);
			}
			this.svg.appendChild(ele.toElement());
			return ele;
		}
		this.toElement = function(){ return this.svg;};
	};
	a.kuoqiJs.plugIn.register('Svg',ksvg);
})(this))